import React, { useState } from 'react'
import '../styles/JSXvsHTML.css'

function JSXvsHTML() {
  const [isVisible, setIsVisible] = useState(true)
  const [user, setUser] = useState({
    name: '张三',
    age: 25,
    email: 'zhangsan@example.com'
  })

  const handleClick = () => {
    alert('按钮被点击了！')
  }

  return (
    <div className="jsx-vs-html">
      <h1>🔍 JSX 与 HTML 的区别</h1>
      
      <div className="comparison-sections">
        {/* 属性名称差异 */}
        <section className="comparison-section">
          <h2>📝 属性名称差异</h2>
          <div className="comparison-grid">
            <div className="html-example">
              <h3>HTML 属性</h3>
              <pre><code>{`<!-- HTML 属性 -->
<div class="container">
  <label for="name">姓名</label>
  <input type="text" tabindex="1">
  <button onclick="handleClick()">
    点击我
  </button>
</div>`}</code></pre>
            </div>
            
            <div className="jsx-example">
              <h3>JSX 属性</h3>
              <pre><code>{`{/* JSX 属性 */}
<div className="container">
  <label htmlFor="name">姓名</label>
  <input type="text" tabIndex="1" />
  <button onClick={handleClick}>
    点击我
  </button>
</div>`}</code></pre>
            </div>
          </div>
        </section>

        {/* 表达式嵌入 */}
        <section className="comparison-section">
          <h2>💡 表达式嵌入</h2>
          <div className="comparison-grid">
            <div className="html-example">
              <h3>HTML 方式</h3>
              <pre><code>{`<!-- HTML 需要手动操作 DOM -->
<div id="user-info">
  <h2 id="user-name"></h2>
  <p id="user-age"></p>
</div>

<script>
document.getElementById('user-name').textContent = user.name;
document.getElementById('user-age').textContent = user.age;
</script>`}</code></pre>
            </div>
            
            <div className="jsx-example">
              <h3>JSX 方式</h3>
              <pre><code>{`{/* JSX 直接嵌入表达式 */}
<div className="user-info">
  <h2>{user.name}</h2>
  <p>{user.age}</p>
</div>`}</code></pre>
            </div>
          </div>
        </section>

        {/* 条件渲染 */}
        <section className="comparison-section">
          <h2>🎯 条件渲染</h2>
          <div className="comparison-grid">
            <div className="html-example">
              <h3>HTML 方式</h3>
              <pre><code>{`<!-- HTML 需要手动控制显示 -->
<div id="conditional-content" style="display: none;">
  条件内容
</div>

<script>
const element = document.getElementById('conditional-content');
if (condition) {
  element.style.display = 'block';
} else {
  element.style.display = 'none';
}
</script>`}</code></pre>
            </div>
            
            <div className="jsx-example">
              <h3>JSX 方式</h3>
              <pre><code>{`{/* JSX 声明式条件渲染 */}
{isVisible && <div>条件内容</div>}

{isVisible ? (
  <div>显示内容</div>
) : (
  <div>隐藏内容</div>
)}`}</code></pre>
            </div>
          </div>
        </section>

        {/* 列表渲染 */}
        <section className="comparison-section">
          <h2>📋 列表渲染</h2>
          <div className="comparison-grid">
            <div className="html-example">
              <h3>HTML 方式</h3>
              <pre><code>{`<!-- HTML 需要手动构建 -->
<ul id="user-list"></ul>

<script>
const userList = document.getElementById('user-list');
users.forEach(user => {
  const li = document.createElement('li');
  li.textContent = user.name;
  userList.appendChild(li);
});
</script>`}</code></pre>
            </div>
            
            <div className="jsx-example">
              <h3>JSX 方式</h3>
              <pre><code>{`{/* JSX 声明式列表渲染 */}
<ul>
  {users.map(user => (
    <li key={user.id}>{user.name}</li>
  ))}
</ul>`}</code></pre>
            </div>
          </div>
        </section>

        {/* 事件处理 */}
        <section className="comparison-section">
          <h2>🎮 事件处理</h2>
          <div className="comparison-grid">
            <div className="html-example">
              <h3>HTML 方式</h3>
              <pre><code>{`<!-- HTML 字符串事件处理 -->
<button onclick="handleClick()">
  点击我
</button>

<script>
function handleClick() {
  alert('按钮被点击了！');
}
</script>`}</code></pre>
            </div>
            
            <div className="jsx-example">
              <h3>JSX 方式</h3>
              <pre><code>{`{/* JSX 函数事件处理 */}
<button onClick={handleClick}>
  点击我
</button>

const handleClick = () => {
  alert('按钮被点击了！');
};`}</code></pre>
            </div>
          </div>
        </section>

        {/* 样式处理 */}
        <section className="comparison-section">
          <h2>🎨 样式处理</h2>
          <div className="comparison-grid">
            <div className="html-example">
              <h3>HTML 方式</h3>
              <pre><code>{`<!-- HTML 字符串样式 -->
<div style="background-color: red; 
            color: white; 
            padding: 10px;">
  红色背景
</div>`}</code></pre>
            </div>
            
            <div className="jsx-example">
              <h3>JSX 方式</h3>
              <pre><code>{`{/* JSX 对象样式 */}
<div style={{
  backgroundColor: 'red',
  color: 'white',
  padding: '10px'
}}>
  红色背景
</div>`}</code></pre>
            </div>
          </div>
        </section>
      </div>

      {/* 实际演示 */}
      <section className="demo-section">
        <h2>🚀 实际演示</h2>
        <div className="demo-content">
          <div className="demo-card">
            <h3>用户信息（JSX 动态渲染）</h3>
            <div className="user-info">
              <p><strong>姓名：</strong>{user.name}</p>
              <p><strong>年龄：</strong>{user.age}</p>
              <p><strong>邮箱：</strong>{user.email}</p>
            </div>
            
            <div className="demo-actions">
              <button onClick={() => setUser({
                ...user,
                age: user.age + 1
              })}>
                增加年龄
              </button>
              
              <button onClick={() => setIsVisible(!isVisible)}>
                {isVisible ? '隐藏' : '显示'}内容
              </button>
            </div>
            
            {isVisible && (
              <div className="conditional-content">
                <p>这是条件渲染的内容！</p>
                <p>当前时间：{new Date().toLocaleTimeString()}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* 主要区别总结 */}
      <section className="summary-section">
        <h2>📊 主要区别总结</h2>
        <div className="summary-grid">
          <div className="summary-item">
            <h3>🔤 属性名称</h3>
            <ul>
              <li><strong>HTML：</strong>class, for, onclick</li>
              <li><strong>JSX：</strong>className, htmlFor, onClick</li>
            </ul>
          </div>
          
          <div className="summary-item">
            <h3>💬 表达式</h3>
            <ul>
              <li><strong>HTML：</strong>需要 DOM 操作</li>
              <li><strong>JSX：</strong>直接使用 {'{}'}</li>
            </ul>
          </div>
          
          <div className="summary-item">
            <h3>🎯 条件渲染</h3>
            <ul>
              <li><strong>HTML：</strong>手动控制 display</li>
              <li><strong>JSX：</strong>声明式条件渲染</li>
            </ul>
          </div>
          
          <div className="summary-item">
            <h3>📋 列表渲染</h3>
            <ul>
              <li><strong>HTML：</strong>手动创建元素</li>
              <li><strong>JSX：</strong>map 方法渲染</li>
            </ul>
          </div>
          
          <div className="summary-item">
            <h3>🎮 事件处理</h3>
            <ul>
              <li><strong>HTML：</strong>字符串函数名</li>
              <li><strong>JSX：</strong>函数引用</li>
            </ul>
          </div>
          
          <div className="summary-item">
            <h3>🎨 样式处理</h3>
            <ul>
              <li><strong>HTML：</strong>字符串样式</li>
              <li><strong>JSX：</strong>对象样式</li>
            </ul>
          </div>
        </div>
      </section>
    </div>
  )
}

export default JSXvsHTML 